<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<title>无标题文档</title>
	</head>

	<body>
		<div id="menu">
			<h2><input type="checkbox" name="role" value="101"/>系统管理</h2>
			<p>
				<input type="checkbox" name="role" value="101001" />用户管理
				<input type="checkbox" name="role" value="101002" />参数管理
				<input type="checkbox" name="role" value="101003" />权限管理
				<input type="checkbox" name="role" value="101004" />日常管理
				<input type="checkbox" name="role" value="101005" />财务管理
			</p>
			<hr/>
			<h2><input type="checkbox" name="role" value="102"/>鲜花订单管理</h2>
			<p>
				<input type="checkbox" name="role" value="102032" />增加订单
				<input type="checkbox" name="role" value="102013" />订单发货
				<input type="checkbox" name="role" value="102015" />在线结算
				<input type="checkbox" name="role" value="102016" />原料管理
			</p>
			<hr/>
			<h2><input type="checkbox" name="role" value="103"/>客户管理</h2>
			<p>
				<input type="checkbox" name="role" value="103032" />增加用户
				<input type="checkbox" name="role" value="103032" />查找用户
				<input type="checkbox" name="role" value="103012" />用户维护
				<input type="checkbox" name="role" value="103012" />生日祝贺
				<input type="checkbox" name="role" value="103012" />删除用户
			</p>
		</div>
		<p>
			<input type="button" value="全选" />
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
		</p>
		<hr/>
		<p>
			1:实现 全选 全不选 功能（通过点击 全选 按钮）<br/> 2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br/> 3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。
			<br/> 4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
		</p>
	</body>
	<script>
		$(function() {
			var $btCheckAll = $("input[type=button]"); //全选按钮的dom
			var $btCheckTeam = $("#menu h2 >input"); //H2中大项的dom
			var $btCheckXiao = $("#menu p input[type=checkbox]"); //小项的dom
			var ischeck = true; //全选

			$btCheckAll.click(function() {
				if(ischeck) {
					$("input[type=checkbox]").prop("checked", ischeck);
					$(this).val("全不选");
					ischeck = false;
				} else {
					$("input[type=checkbox]").prop("checked", ischeck);
					$(this).val("全选");
					ischeck = true;
				}

			});
			$btCheckTeam.click(function() {

				var ischeckteam = $(this).prop("checked");
				$(this).parent().next().children().prop("checked", ischeckteam);
			});

			$btCheckXiao.click(function() {
				var ischeck1 = true;
				var array = $(this).parent().children();

				for(var i in array) {
					if(array[i].checked) {
						$(this).parent().prev().children().prop("checked", true);
						ischeck1 = false;
					}
				}
				if(ischeck1) {
					$(this).parent().prev().children().prop("checked", false);
					ischeck1 = true;
				}

				//				array.each(function(i, obj) {
				//					alert(obj.prop("checked"));
				//					var ischecks = obj.prop("checked");
				//					alert(ischecks);
				//					if(ischecks) {
				//						$(this).parent().prev().children().prop("checked", true);
				//						ischeck1 = false;
				//					}
				//				});
				//				if(ischeck1) {
				//					$(this).parent().prev().children().prop("checked", false);
				//				}
				//				ischeck1 = true;
				//				alert(array.length);

				//				if(ischeckteam) {
				//					$(this).parent().prev().children().prop("checked", true);
				//					ischeck1 = false;
				//				}
				//				for(var i = 0; i < $(this).parent().prev().children().length; i++) {
				//					var ischecks = $(this).parent().children().next().prop("checked");
				//					if(ischecks) {
				//						$(this).parent().prev().children().prop("checked", true);
				//						ischeck1 = false;
				//					}
				//				}
				//				if(ischeck1) {
				//					$(this).parent().prev().children().prop("checked", false);
				//				}
				//				ischeck1 = true;
			});

		});
	</script>

</html>